<%inherit file="/base.mako"/>\

<%def name="header()">Welcome</%def>

<p>
Welcome to the Chicago Public Schools Racial Data Warehouse.  This
site is a simple visualization of <a href="http://research.cps.k12.il.us/cps/accountweb/Reports/RacialSurvey/">
publicly available data on the
self-reported racial make up</a> of Chicago Public Schools. This site is
not affiliated with the Chicago Public Schools.
</p>

<p>
If you're interested in the racial make up of a particular school you
can look for the school on a map or 
<a href="${h.url(controller="schools", action="index")}">browse for the
school by name</a>.  For more general information, checkout the most
diverse schools and the least diverse schools or 
<a href="${h.url(controller="years", action="index")}">look at the
overview information for a particular year</a>.  If you're technical
and interested in building a site like this one with some other data
source, be sure to check out the <a href="tutorial">tutorial</a>.
</p>

<h3>Find your school:</h3>
<div id="map-container">
  <div id="map" style="width: 800px; height: 400px"></div>
</div>

<h3>Student totals:</h3>
<% width = len(c.years) * 50 %>
<div id='yearbyyear' class='graph' style='width: ${width}px; height: 200px;'></div>


<script type="text/javascript"> 
jQuery(document).ready(function () {
  initialize();

  jQuery('#yearbyyear').tufteBar({
    data: [
      % for year in c.years:
      [[${year.white},
        ${year.nativeamerican}, 
        ${year.hispanic}, 
        ${year.black}, 
        ${year.asian}, ],  {label: '${year.year}'}],
      % endfor
    ],

    barWidth: 0.8, 

    barLabel:  function(index) { 
      //return $.tufteBar.formatNumber(this[0]) + 'x' 
      return '';
    }, 

    // The label on the x-axis - can contain HTML
    axisLabel: function(index) { 
       var year = this[1].label;
       return '<a href=\'/years/' + year +'\'>' + year + '</a>';
    }, 

    // Stacked graphs also pass a stackedIndex parameter
    color: function(index, stackedIndex) { 
      return ['#683B1A', '#E8970A', '#F5D600', '#93B216', '#0093BB'][stackedIndex] //% 2] 
    },

 
    // Legend is optional
    legend: {
      // Data can be an array of any type of object, but the default
      // formatter works with strings
      data: ["White", "Native American", "Hispanic", "Black",  "Asian"], 

      // By default, the colors of the graph are used
      color: function(index) { 
        return ['#683B1A', '#E8970A', '#F5D600', '#93B216', '#0093BB'][index];
      },

      // You can customize the element label - can contain HTML
      label: function(index) { return this; }
    }
  });
});

</script>


<script type="text/javascript">
  // Call this function when the page has been loaded
  function initialize() {
    //map.addControl(new GSmallMapControl());

    var latlng = new google.maps.LatLng(41.850033,-87.650052);
    var myOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);


    var markers = [];
    <% i = 0 %>
    % for school in c.schools:
    var school${i} = new google.maps.LatLng(${school.latitude}, ${school.longitude});
    var marker${i} = new google.maps.Marker({
        position: school${i}, 
        map: map,
        title:"${school.school}"
    });

    var infowindow${i} = new google.maps.InfoWindow({
        content: "<b>${school.school}</b><br/>${school.address}<br/><br/><a href=\"${h.url("school_detail", school=school)}\">See school detail</a>"
    });
    google.maps.event.addListener(marker${i}, 'click', function() {
      infowindow${i}.open(map, marker${i});
    });

    markers.push(marker${i});
    <% i+=1 %>
    % endfor
    var markerCluster = new MarkerClusterer(map, markers);

  }
  //google.setOnLoadCallback(initialize);
</script>

